<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jCarousel Sample</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.msCarousel-min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mscarousel.css" />
<style type="text/css">
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
.mstoplinks{padding:3px; border-bottom:2px solid #c3c3c3;}
.mstoplinks a, .mstoplinks a:visited{color:#003366; text-decoration:none; border-right:1px solid #c3c3c3; padding:0 10px}
.mstoplinks a.active, .mstoplinks a.active:visited{color:#003366; text-decoration:none; border-right:1px solid #c3c3c3; padding:0 10px;border-bottom:1px solid #c3c3c3; border-left:1px solid #c3c3c3; }
</style>
</head>
<body>
<div style="clear:both" class="mstoplinks">
	<p><a href="index.html" class="active">Normal - Horizontal & Vertical</a> &nbsp;<a href="carousel-hidden-feature.html">Hidden Feature</a>&nbsp;<a href="autoScroll.html">Auto Scroll</a>&nbsp;<a href="carousel-nested.html">Nested Carousel</a>&nbsp;<a href="carousel-with-number.html">Carousel with number</a>&nbsp;<a href="gallery.html">Carousel - Big Image Gallery</a>&nbsp;<a href="http://www.marghoobsuleman.com/jquery-ms-carousel">Download & Documentation</a></p>
</div>


<h1>Horizontal Carousel</h1>
<div id="carouseldiv" style="border:2px solid #c3c3c3; background-color:#FFFFFF">
  <div class="set"> abc</div>
  <div class="set">123 </div>
  <div class="set">456 </div>
  <div class="set"> </div>
  <div class="set"> </div>
  <div class="set"> </div>
</div>
<div style="clear:both; padding:10px; border-bottom:1px solid #c3c3c3; margin-bottom:10px;">
  <input name="previous" id="previous" type="button" value="Previous" />
  &nbsp;
  <input name="next" id="next" type="button" value="Next" />
  &nbsp; </div>
<h1>Vertical Carousel</h1>
<div id="verticalCarousel" style="border:2px solid #c3c3c3; background-color:#FFFFFF">
  <div class="set">
    <div style="background:#C77B3F"><img src="images/menu1.jpg" width="198" height="29" /></div>
    <img src="images/menu-img-1.jpg" width="486" height="198" /> </div>
  <div class="set">
    <div style="background:#FFC732"><img src="images/menu2.jpg" width="198" height="29" /></div>
    <img src="images/menu-img-2.jpg" width="486" height="198" /> </div>
  <div class="set">
    <div style="background:#007C90"> <img src="images/menu3.jpg" width="198" height="29" /> </div>
    <img src="images/menu-img-3.jpg" width="486" height="198" /> </div>
  <div class="set">
    <div style="background:#AD6F08"> <img src="images/menu4.jpg" width="198" height="29" /> </div>
    <img src="images/menu-img-4.jpg" width="486" height="198" /> </div>
  <div class="set">
    <div style="background:#387855"> <img src="images/menu5.jpg" width="198" height="29" /> </div>
    <img src="images/menu-img-5.jpg" width="486" height="198" /> </div>
  <div class="set">
    <div style="background:#8C4B2D"> <img src="images/menu6.jpg" width="198" height="29" /> </div>
    <img src="images/menu-img-6.jpg" width="486" height="198" /> </div>
    
</div>
<div style="clear:both; padding:10px; border-bottom:1px solid #c3c3c3; margin-bottom:10px;">
  <input name="previousV" id="previousV" type="button" value="Previous" />
  &nbsp;
  <input name="nextV" id="nextV" type="button" value="Next" />
  &nbsp; </div>
<script type="text/javascript">
$(document).ready(function() {	
	try {
		var oHandlerHorizontal = $("#carouseldiv").msCarousel({boxClass:'div.set', width:516, height:198, scrollSpeed:500}).data("msCarousel");
		$("#next").click(function() {
			oHandlerHorizontal.next();
		});
		$("#previous").click(function() {
			oHandlerHorizontal.previous();
		});	
		//vertical
		var oHandlerVertical = $("#verticalCarousel").msCarousel({boxClass:'div.set', width:486, height:198, scrollSpeed:500, vertical:true}).data("msCarousel");
		$("#nextV").click(function() {
			oHandlerVertical.next();
		});
		$("#previousV").click(function() {
			oHandlerVertical.previous();
		});			
		
	} catch(e) {
		alert(e.message);
	}
	
})
</script>
</body>
</html>
